const loginBtn = document.getElementById('loginBtn');
const registerBtn = document.getElementById('registerBtn');

loginBtn.addEventListener('click', showLoginModal);
registerBtn.addEventListener('click', showRegisterModal);

function showLoginModal() {
    modalBody.innerHTML = `
        <h2>登录</h2>
        <div class="form-group">
            <label for="loginUsername">用户名</label>
            <input type="text" id="loginUsername" placeholder="输入用户名">
        </div>
        <div class="form-group">
            <label for="loginPassword">密码</label>
            <input type="password" id="loginPassword" placeholder="输入密码">
        </div>
        <button id="loginConfirm">登录</button>
    `;

    modal.style.display = 'block';

    document.getElementById('loginConfirm').addEventListener('click', login);
}

function showRegisterModal() {
    modalBody.innerHTML = `
        <h2>注册</h2>
        <div class="form-group">
            <label for="registerName">用户名</label>
            <input type="text" id="registerName" placeholder="输入用户名">
        </div>
        <div class="form-group">
            <label for="registerPassword">密码</label>
            <input type="password" id="registerPassword" placeholder="输入密码">
        </div>
        <button id="registerConfirm">注册</button>
    `;

    modal.style.display = 'block';

    document.getElementById('registerConfirm').addEventListener('click', register);
}

function login() {
    const loginUsername = document.getElementById('loginUsername').value;
    const loginPassword = document.getElementById('loginPassword').value;

    fetch('/api/login', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json'
        },
        body: JSON.stringify({ loginUsername, loginPassword })
    })
    .then(response => response.json())
    .then(data => {
        if (data.access_token) {
            localStorage.setItem('token', data.access_token);
            modal.style.display = 'none';
            updateAuthState();
            location.reload();
        } else {
            alert('登录失败: ' + (data.error || '未知错误'));
        }
    })
    .catch(error => console.error('登录错误:', error));
}

function register() {
    const registerName = document.getElementById('registerName').value;
    const registerPassword = document.getElementById('registerPassword').value;

    fetch('/api/register', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json'
        },
        body: JSON.stringify({ registerName, registerPassword })
    })
    .then(response => response.json())
    .then(data => {
        if (data.message) {
            alert('注册成功，请登录');
            showLoginModal();
        } else {
            alert('注册失败: ' + (data.error || '未知错误'));
        }
    })
    .catch(error => console.error('注册错误:', error));
}

function updateAuthState() {
    const token = localStorage.getItem('token');
    if (token) {
        loginBtn.textContent = '退出';
        loginBtn.removeEventListener('click', showLoginModal);
        loginBtn.addEventListener('click', logout);
        // loadFileList();
    } else {
        loginBtn.textContent = '登录';
        loginBtn.removeEventListener('click', logout);
        loginBtn.addEventListener('click', showLoginModal);
    }
}

function logout() {
    localStorage.removeItem('token');
    updateAuthState();
    location.reload();
    alert('已退出登录');
}

updateAuthState();